<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>menu</title>
		<link rel="stylesheet" href="/face-front/layuimini/lib/layui-v2.5.5/css/layui.css" media="all">
		<link rel="stylesheet" href="/face-front/layuimini/css/public.css" media="all">
		<style>
			.layui-btn:not(.layui-btn-lg ):not(.layui-btn-sm):not(.layui-btn-xs) {
            height: 34px;
            line-height: 34px;
            padding: 0 8px;
        }
    </style>
	</head>
	<body>
		<div class="layuimini-container">
			<div class="layuimini-main">
				<blockquote class="layui-elem-quote">
					Layui的树形表格treeTable，支持异步加载(懒加载)、复选框联动、折叠状态记忆。<br>
					<a href="https://gitee.com/whvse/treetable-lay" target="_blank" class="layui-btn layui-btn-danger">treetable-lay</a>
				</blockquote>
				<script type="text/html" id="toolbarDemo">
					<div class="layui-btn-container">
		        <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"> 添加 </button>
		        <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete"> 删除 </button>
		    </div>
		</script>
				<div>
					<div class="layui-btn-group">
						<button class="layui-btn" id="btn-expand">全部展开</button>
						<button class="layui-btn layui-btn-normal" id="btn-fold">全部折叠</button>
					</div>
					<table id="munu-table" class="layui-table" lay-filter="munu-table"></table>
				</div>
			</div>
		</div>
		<!-- 操作列 -->
		<script type="text/html" id="auth-state">
			<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

		<script src="/face-front/layuimini/lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
		<script src="/face-front/layuimini/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
		<script>
			var baseUrl = "http://localhost:8083/face/api/";
			layui.use(['table', 'treetable'], function() {
				var $ = layui.jquery;
				var table = layui.table;
				var treetable = layui.treetable;
var xrtable = {
					toolbar: '#toolbarDemo',
					id: 'listReload',
					treeColIndex: 1,
					treeSpid: 0,
					treeIdName: 'id',
					treePidName: 'pid',
					elem: '#munu-table',
					url: baseUrl + 'menu/admin/list',
					limits: [10, 15, 20, 25, 50, 100],
					limit: 15,
					page: false,
					skin: 'line',
					cols: [
						[{
								type: 'numbers'
							},
							{
								field: 'title',
								minWidth: 200,
								title: '菜单名称'
							},
							{
								field: 'mcode',
								title: '权限标识'
							},
							{
								field: 'href',
								title: '菜单url'
							},
							{
								field: 'mdescribe',
								width: 80,
								align: 'center',
								title: '说明'
							},
							{
								field: 'mtype',
								width: 80,
								align: 'center',
								templet: function(d) {
									if (d.mtype == 1) {
										return '<span class="layui-badge layui-bg-gray">菜单</span>';
									}
									if (d.mtype == 0) {
										return '<span class="layui-badge layui-bg-blue">目录</span>';
									} else {
										return '<span class="layui-badge-rim">按钮</span>';
									}
								},
								title: '类型'
							},
							{
								templet: '#auth-state',
								width: 120,
								align: 'center',
								title: '操作'
							}
						]
					],
					done: function() {
						layer.closeAll('loading');
					}
				}
				// 渲染表格
				layer.load(2);
				treetable.render(xrtable);

				$('#btn-expand').click(function() {
					treetable.expandAll('#munu-table');
				});

				$('#btn-fold').click(function() {
					treetable.foldAll('#munu-table');
				});
				/**
				 * toolbar监听事件
				 */
				table.on('toolbar(munu-table)', function(obj) {
					if (obj.event === 'add') { // 监听添加操作
						var index = layer.open({
							title: '添加菜单',
							type: 2,
							shade: 0.2,
							maxmin: true,
							shadeClose: true,
							area: ['30%', '80%'],
							content: '/face-front/layuimini/page/face/add.html',
						});
						$(window).on("resize", function() {
							layer.full(index);
						});
					} else if (obj.event === 'delete') { // 监听删除操作
						// var checkStatus = table.checkStatus('munu-table'),
						// 	data = checkStatus.data;
						layer.alert("这是个花瓶展示，不能用！");
					}
				});

				//监听表格复选框选择
				table.on('checkbox(munu-table)', function(obj) {
					console.log(obj)
				});
				//监听工具条
				table.on('tool(munu-table)', function(obj) {
					var data = obj.data;
					var layEvent = obj.event;
					if (layEvent === 'del') {
						var id = data.id;
						 layer.confirm('真的删除行么', function(index){
						       $.ajax({
						       	url: baseUrl + 'menu/{id}/del?id=' + id,
						       	type: "POST",
						       	data: id,
						       	// async: false,
						       	dataType: "json",
						       	success: function(result) {
						       		if (result.code == 0) {
						       			layer.msg('删除 ' + data.title + " 成功");
						       		}else{
										layer.msg(result.msg);
									}
						       	},
						       	error: function(XMLHttpRequest, textStatus, errorThrown) {
						       		// 状态码
						       		console.log(XMLHttpRequest.status);
						       		// 状态
						       		console.log(XMLHttpRequest.readyState);
						       		// 错误信息
						       		console.log(textStatus);
						       	}
						       });
						      });
							  
							       
					} else if (layEvent === 'edit') {
						layer.msg('修改' + data.id);
					}
					layer.load(2);
					treetable.render(xrtable);
				});
				
			});
		</script>
	</body>
</html>
